<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="pers.xusuona.connectAPI.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="test2.jsp" method="post">
		<div style="border: 2px dashed red;">
			<p>
				图片上传前预览：<input type="file" name="filename" id="xdaTanFileImg"
					onchange="xmTanUploadImg(this)" accept="image/*" /> <input
					type="button" value="隐藏图片"
					onclick="document.getElementById('xmTanImg').style.display = 'none';" />
				<input type="button" value="显示图片"
					onclick="document.getElementById('xmTanImg').style.display = 'block';" />
				<input type="submit" value="确定上传">
				<button value="get" onclick=get()></button>
			</p>
			<img id="xmTanImg" height=170px width=170px />
			<div id="xmTanDiv"></div>
		</div>
		<hr />
		<script type="text/javascript">
		
		    function get(){
		    	var path = document.getElementsById("xdaTanFileImg").value;
		    	console.log(path);
		    }
			//判断浏览器是否支持FileReader接口
			if (typeof FileReader == 'undefined') {
				document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
				//使选择控件不可操作
				document.getElementById("xdaTanFileImg").setAttribute(
						"disabled", "disabled");
			}

			//选择图片，马上预览
			function xmTanUploadImg(obj) {
				var file = obj.files[0];

				console.log(obj);
				console.log(file);
				console.log("file.size = " + file.size); //file.size 单位为byte

				var reader = new FileReader();

				//读取文件过程方法
				reader.onloadstart = function(e) {
					console.log("开始读取....");
				}
				reader.onprogress = function(e) {
					console.log("正在读取中....");
				}
				reader.onabort = function(e) {
					console.log("中断读取....");
				}
				reader.onerror = function(e) {
					console.log("读取异常....");
				}
				reader.onload = function(e) {
					console.log("成功读取....");

					var img = document.getElementById("xmTanImg");
					img.src = e.target.result;
					//或者 img.src = this.result;  //e.target == this
				}

				reader.readAsDataURL(file);
			}
		</script>
	</form>
	<div linkNav="true"
		class="ai-module-demo ai-module-section js-module-section">
		<div class="ai-module-header">
			功能演示
			<!---->
		</div>
		<div class="ai-module-demo-container">
			<!---->
		</div>
	</div>
</body>
</html>